<template>
  <div class="box">
      <el-row :gutter="12">
  <el-col :span="24">
    <el-card style="color:blue" shadow="always">
      故障报修列表
    </el-card>
  </el-col>
</el-row>
    <!-- 头部表单 -->
    <!-- 保修标题 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="保修标题">
    <el-input v-model="formInline.key" placeholder="保修标题"></el-input>
  </el-form-item>
  <!-- 地址 -->
   <el-form-item label="地址">
    <el-input v-model="formInline.address" placeholder="地址"></el-input>
  </el-form-item>
  <!-- 电话 -->
   <el-form-item label="电话">
    <el-input v-model="formInline.tel" placeholder="电话"></el-input>
  </el-form-item>
  <!-- 日期 -->
  <span class="demonstration">按日期查询</span>
<el-date-picker
        label="按时间查询"
      v-model="formInline.begindate"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <!-- 维修状态/类型/居民 -->
    <el-form-item label="维修状态">
    <el-select v-model="formInline.state" placeholder="请选择">
      <el-option 
      v-for="item in mainten"
      :label="item.name"
      :value="item.id"
      :key="item.id"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="维修类型">
    <el-select v-model="formInline.type" placeholder="请选择">
      <el-option 
      v-for="item in genre"
      :label="item.name"
      :value="item.id"
      :key="item.id"
      ></el-option>
    </el-select>
  </el-form-item>
  <!-- 居民 -->
   <el-form-item label="居民">
    <el-input v-model="formInline.userid" placeholder="请选择关键词"></el-input>
  </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="getTime">查询</el-button>
  </el-form-item>
  <br>
  <!-- 批量删除按钮 -->
    <el-button @click="baoxiudeles" type="danger">批量删除</el-button>
</el-form>
<!-- 表格 -->
    <Table 
      :tableData="tableData"
      :tableHead="tableHead"
      @stateChange="stateChange"
      @updateNotice="updateNotice"
      @deleteNotice="deleteNotice"
      @textView="textView"
      @handleSelectionChange="handleSelectionChange"
      />
  <!-- 分页 -->
   <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 15, 20, 25]"
      :page-size="formInline.page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
   <el-dialog
              title="修改报修"
              style="font-size: bold; text-align: center"
              :visible.sync="dialogVisible"
              width="30%"
              
            >
              <el-form
                :model="formInline"
               
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="故障类型" prop="typename">
                  <el-input v-model="formInline.typename"></el-input>
                </el-form-item>
                <el-form-item label="维修地址" prop="areas">
                  <el-input v-model="formInline.address"></el-input>
                </el-form-item>
               <el-form-item label="故障描述" prop="content">
                  <el-input v-model="formInline.content"></el-input>
                </el-form-item>
                <el-form-item label="维修状态" prop="statename">
                  <el-input v-model="formInline.statename"></el-input>
                </el-form-item>
                <el-form-item label="业主名称" prop="username">
                  <el-input v-model="formInline.username"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" class="btn"
                  >取 消</el-button
                >
                <el-button type="primary" @click="addFormData" class="btnn"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
  </div>
</template>

<script>
   import axios from "axios"
   import Table from '../components/common/fengzhuang.vue'
   import {baoxiudele} from '../utils/utils'
   export default {
     components:{
        Table
    },
    data() {
      return {
        dialogVisible:false,
         qwert:'',
        // 表头
          tableHead:[
                {
                    label:'ID',
                    prop:'id'
                },
                 {
                    label:'故障类型',
                    prop:'typename',
                    type:'isClick'
                },
                  {
                    label:'维修地址',
                    prop:'address',
                },
               {
                    label:'图片',
                    prop:'images',
                    type:'img',
                    imgClick:true,
                    formatter:(row,prop)=>{
                      // console.log(prop,'prop');
                      //   let defimg='https://tse1-mm.cn.bing.net/th/id'
                    const images =prop.map(item=>this.$config.baseUrl+item.url)
                    // console.log(images)
                    return{
                      url  :images[0],
                      images
                    }
                    }
                },
                  {
                    label:'故障描述',
                    prop:'content',
                },
                 {
                    label:'维修状态',
                    prop:'statename',
                },
                 {
                    label:'业主名称',
                    prop:'username',
                },
                  {
                    label:'维修日期',
                    prop:'addtime',
                },
                 {
                   label:'操作',
                    type:'button',
                    button:{
                      update:true,
                      delete:true
                    }
                },
            ],
        // 维修状态
       mainten:[],
        // 维修类型
        genre:[],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        // 表格
         tableData: [],
        // 日期
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: '',
        updateData: {},
        // 保修 地址 电话
        updateData:{},
        formInline: {
          user: '',
          region: '',
          key:'',        //否	string	搜索关键字
          address:'',	      //否	string	地址
          tel:'',      //否	string	联系电话
          begindate:'',    //否	string	查询开始日期
          enddate:'',	        //否	string	查询截止日期
          state:'',     //否	int	维修状态
          type:'',     	//否	int	维修类型
          userid:'',    	//否	int	居民id
          page:1,        	//否	int	当前页码
          psize:5          //否	int	每页显示多少条
        }
      }
    },
    mounted(){
      // this.login()
      this.getTime()
     this.maintenance()
     this.catygory()
    },
    methods: {
      // 修改
        updateNotice(data,val){
        this.dialogVisible=val
        if(val){
          this.dialogVisible=!!val
          if (this.dialogVisible) {
              const qq = this.tableData.find(item => item.id == data.id)
            this.formInline = qq
            console.log(this.formInline)
            // this.formInline =_.cloneDeep(qq)
          }
        }
      },
      addFormData(){
        const token =sessionStorage.getItem('token')
        const parms={
          Authorization:token,
        }

        axios.post('http://estate.eshareedu.cn/estate/api/repairs/add',{headers:parms,params:this.formInline}).then(res=>{
          console.log(res);
          if (res.data.errCode=='10000') {
            this.$message({
              type:'success',
              message:'修改成功'
            })
            this.dialogVisible=false
          }else{
            console.log(12345);
          }
        })
         
      },
      handleSelectionChange(val){
        this.qwert=val
      },
      async baoxiudeles(){
        // console.log(123);
        if (this.qwert.length==0) {
          this.$message({
            type:'warning',
            message:'请勾选你删除的数据'
          })
        }else{
          let ids=[]
          this.qwert.forEach(item=>{
            ids.push(item.id)
          })
          let {errCode}= await baoxiudele ({
            ids:ids
          })
          if (errCode==10000) {
            this.$message({
              type:'success',
              message:'删除成功'
            })
          }
          this.getTime()
         console.log(errCode);
        }
      },
      stateChange(data){
        console.log('stateChange',data);
      },

      textView(data){
        console.log('textView',data);
      },
       open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      // 删除
     deleteNotice(e){
        console.log(e);
        const {id} =e
        const token =sessionStorage.getItem('token')
        
        const parms={
          Authorization:token,
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(()=>{
                axios.get('http://estate.eshareedu.cn/estate/api/repairs/delete?id='+id,{headers:parms}).then(res=>{
              console.log(res);
              this.tableData=[]
                this.getTime()
          })
          this.$message({
            type:'success',
            message:'删除成功'
          })
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'已取消删除'
          })
        })
        
      },
      //  维修类型
       catygory(){
         const token =sessionStorage.getItem('token')
        const parms={
          Authorization:token
        }
        axios.get('http://estate.eshareedu.cn/estate/api/repairstype/list',{headers:parms}).then(res=>{
          // console.log(res);
          const{errCode,errMsg}=res.data
          if (errCode==10000) {
            this.genre=res.data.data.list
            // console.log(this.genre);
          }
        })
      },
      // 维修状态
      maintenance(){
         const token =sessionStorage.getItem('token')
        const parms={
          Authorization:token
        }
        axios.get('http://estate.eshareedu.cn/estate/api/repairstate/list',{headers:parms}).then(res=>{
          // console.log(res);
          const{errCode,errMsg}=res.data
          if (errCode==10000) {
            this.mainten=res.data.data.list
            // console.log(this.mainten);
          }
        })
      },
      onSubmit() {
        console.log('submit!');
      },
      // 分页
       handleSizeChange(val) {
         console.log(`当前页: ${val}`);
        this.formInline.psize=val;
        this.getTime()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.formInline.page=val
        this.getTime()
      },
      // token
      
      // 列表
      getTime(){
        const token =sessionStorage.getItem("token")
        
        const parms={
          Authorization:token
        }
        console.log(parms)
        axios.get('http://estate.eshareedu.cn/estate/api/repairs/list',{headers:parms,params:this.formInline}).then(res=>{
          console.log(res);
          const{errCode,errMsg}=res.data
          if (errCode==10000) {
            console.log(res,'列表');
            this.tableData=res.data.data.list
          }else{
            console.log(errMsg);
          }
        })
      }
    }
  }
</script>

<style scoped>
    .demo-form-inline{
        margin-top: 30px;
        margin-left: 30px;
    }
    .block{
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
    .imgesd{
      width: 80px;
      height: 80px;
    }
   
</style>